<template>
  <!-- 用户导入对话框 -->
  <el-dialog :loading="loading" :title="title" :visible.sync="open" append-to-body width="400px" class="uploadDialog">
    <el-upload :action="baseUrl + uploadUrl + '?updateSupport=' + updateSupport" :auto-upload="false"
               :disabled="isUploading" :headers="headers"
               :limit="1" :on-progress="handleFileUploadProgress"
               :on-success="handleFileSuccess" accept=".xlsx, .xls" drag ref="upload">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
      <div class="el-upload__tip" slot="tip">
        <el-link @click="downloadTemplate()" style="font-size:14px;color: #1890ff;" type="info">下载模板</el-link>
      </div>
      <div class="el-upload__tip" slot="tip" style="color:red">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
    </el-upload>
    <div class="dialog-footer" slot="footer">
      <el-button @click="submitFileForm" type="primary">确 定</el-button>
      <el-button @click="open = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
    import {getToken} from "@/utils/auth";
    import {downloadFile} from "@/api/manage";

    export default {
        name: "UploadDialog",
        components: {},
        data() {
            return {
                // 是否显示弹出层（用户导入）
                open: false,
                loading: false,
                // 弹出层标题（用户导入）
                title: "",
                // 是否禁用上传
                isUploading: false,
                // 是否更新已经存在的数据
                updateSupport: 0,
                // 设置上传的请求头部
                headers: {Authorization: "Bearer " + getToken()},
                //模板下载地址
                downloadTemplateUrl: '/export/downloadTemplate',
                // 上传的地址
                baseUrl: process.env.VUE_APP_BASE_API,
                uploadUrl: "",
                tmplName: "",
                fileName: "",
            };
        },
        created() {

        },
        methods: {
            show() {
                this.open = true;
            },

            /**
             * 下载模板通用方法
             * @param tmplName
             * @param fileName
             */
            downloadTemplate() {
                let that = this;
                let params = {};
                params.tmplName = that.tmplName;
                params.fileName = that.fileName;
                downloadFile(that.downloadTemplateUrl, params);
            },

            /** 导入按钮操作 */
            handleImport() {
                this.title = "用户导入";
                this.open = true;
            },

            // 文件上传中处理
            handleFileUploadProgress(event, file, fileList) {
                this.isUploading = true;
                this.loading = true;
            },
            // 文件上传成功处理
            handleFileSuccess(response, file, fileList) {
                if (response.code == 200) {
                    //成功
                    this.open = false;
                    this.$refs.upload.clearFiles();
                }
                this.loading = false;
                this.isUploading = false;
                this.$emit('handleFileSuccess', response);
            },
            // 提交上传文件
            submitFileForm() {
                this.$refs.upload.submit();
            },


        }
    }
</script>

<style scoped>

</style>
<style lang="scss">
  .uploadDialog {
    .el-dialog {
      height: 40%;
      min-height: 450px;
      .el-dialog__body {
        .el-upload {
          width: 100%;
        }
      }
    }
  }
</style>
